<template>
  <div>
    <el-dialog
      title="入库记录"
      :visible.sync="dialogTableVisible"
      :close-on-click-modal="false"
      :before-close="close"
      width="75%"
      class="dialog caigouListDia"
    >
      <el-table
        v-loading="loading"
        :data="list.rows"
        border
        highlight-current-row
        @current-change="currentChange"
      >
        <el-table-column align="center" type="index" label="序号" width="55" />
        <el-table-column align="center" label="设备名称" property="deviceName" width="150" />
        <el-table-column align="center" label="设备型号" property="deviceSpecs" />
        <el-table-column align="center" label="设备类别" property="typeName" />
        <el-table-column align="center" label="入库时间" property="storageDate" width="170" />
        <el-table-column align="center" label="入库数量" property="storageNumber" />
        <el-table-column align="center" label="设备单位" property="deviceUnit" />
        <el-table-column align="center" label="需要程度" property="degreeNeed" />
        <el-table-column align="center" label="用途" property="purpose" />
        <el-table-column align="center" label="备注" property="remark" />
        <el-table-column label="操作" align="center" width="350" fixed="right">
          <template slot-scope="scope">
            <!-- <el-button size="mini" type="primary" icon="el-icon-edit" @click="pop(scope.row)">修改</el-button> -->
            <el-button style="margin-right:10px;" size="mini" type="success" icon="el-icon-edit" @click="pop(scope.row)">审核</el-button>
            <el-popover
              placement="bottom"
              width="260"
              trigger="click">
              <div style="text-align: center; margin: 0">
                <el-button size="mini" type="warning"  @click="rukuChange(scope.row,1)">手动入库</el-button>
                <el-button type="warning" size="mini"  @click="rukuChange(scope.row,2)">自动入库</el-button>
              </div>
              <el-button slot="reference" size="mini" type="primary" icon="el-icon-view">入库</el-button>
            </el-popover>
            <el-button style="margin-left:10px;" size="mini" type="info" icon="el-icon-edit" @click="getInfo(scope.row)">查看</el-button>
            <el-button style="margin-left:10px;" size="mini" type="danger" icon="el-icon-refresh-left" @click="del(scope.row)">撤销</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="list.total?list.total:0"
        :page.sync="selectForm.pageNum"
        :limit.sync="selectForm.pageSize"
        @pagination="getList"
      />
      <ruku v-if="isRuku" :info="info" @subSetChane="subSetChane"></ruku>
      <!-- 审核 -->
      <el-dialog
        title="审核"
        :visible.sync="isDialog"
        :close-on-click-modal="false"
        :modal-append-to-body="true"
        :append-to-body="true"
        width="1000px"
        class="shenDia"
      >
        <div>
          <h4>基本信息</h4>
          <table border="1" rules="all" class="table">
            <tr>
              <td>设备名称</td>
              <td class="title">{{popForm.deviceName}}</td>
              <td>规格型号</td>
              <td class="title">{{popForm.deviceSpecs}}</td>
              <td>数量(台)</td>
              <td class="title">
                {{popForm.storageNumber}}
              </td>
            </tr>
            <tr>
              <td>生产制造单位</td>
              <td>
                <el-input v-model="popForm.productionUnit"></el-input>
              </td>
              <td>合同编号</td>
              <td>
                <el-input v-model="popForm.contractNumber"></el-input>
              </td>
              <td>验收时间</td>
              <td>
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  class="datatime"
                  v-model="popForm.receptionTime"
                  type="datetime"
                  placeholder="选择日期时间"
                ></el-date-picker>
              </td>
            </tr>
            <tr>
              <td>生产厂家</td>
              <td colspan="2">
                <el-select v-model="popForm.supplierId" placeholder="请选择">
                  <el-option
                    v-for="item in optionsgongys"
                    :key="item.id"
                    :label="item.supplierName"
                    :value="String(item.id)"
                  ></el-option>
                </el-select>
              </td>
              <td>生产厂家信息</td>
              <td colspan="2">
                <el-input v-model="popForm.productionInput"></el-input>
              </td>
            </tr>
            <tr>
              <td>备注</td>
              <td colspan="5">
                <el-input :rows="2" type="textarea" v-model="popForm.remark"></el-input>
              </td>
            </tr>
            <tr>
              <td>验收结果</td>
              <td colspan="5">
                <el-input type="textarea" v-model="popForm.acceptanceResult"></el-input>
              </td>
            </tr>
          </table>
          <h4>
            部门信息
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addBumen"
              style="margin-left:20px"
            >添加</el-button>
          </h4>

          <el-table border :data="popForm.detailList">
            <el-table-column align="center" type="index" label="序号" width="55" />

            <el-table-column align="center" label="验收部门" property="deptName">
              <template slot-scope="scope">
                <el-input v-model="scope.row.deptName"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="验收人员" property="checkingPersonnel">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.checkingPersonnel"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="负责人" property="leader">
              <template slot-scope="scope">
                <el-input type="number" v-model="scope.row.leader"></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="scope">
                <el-button
                  @click="setDel(scope.$index)"
                  icon="el-icon-delete"
                  type="danger"
                  size="mini"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="isDialog=false">取 消</el-button>
          <el-button type="primary" @click="print">打 印</el-button>
        </div>
      </el-dialog>
      <!-- 打印的验收单 -->
      <form id="form1" style="position: absolute;top: -10000px;">
        <table border="1" rules="all" class="table" style="width:700px">
          <tr>
            <td style="width:8%;text-align:center;">设备名称</td>
            <td style="width:14%;padding-left: 20px;text-align:left;">1212</td>
            <td style="width:8%;text-align:center;">规格型号</td>
            <td style="width:10%;padding-left: 20px;text-align:left;" class="title">11</td>
            <td style="width:8%;text-align:center;">数量(台)</td>
            <td style="width:10%;padding-left: 20px;text-align:left;" class="title">555</td>
          </tr>
          <tr>
            <td style="text-align:center;">生产制造单位</td>
            <td style="padding-left:20px;text-align:left;"></td>
            <td style="text-align:center;">合同编号</td>
            <td style="padding-left:20px;text-align:left;"></td>
            <td style="text-align:center;">验收时间</td>
            <td style="padding-left:20px;text-align:left;"></td>
          </tr>

          <tr rowspan="4">
            <td colspan="6" style="text-align:left;padding:0 15px;">
              <h3>验收结果（手填）：</h3>
              <p style="text-indent:2em">
                一、根据**设备采购项目技术协议、合同”相关条款要求，由
                通风部、机电管理部组织对新到货**设备入井使用进行联合验收。
                目前，设备使用正常，满足要求，验收合格。
              </p>
            </td>
          </tr>
          <tr>
            <td>备注</td>
            <td colspan="5"></td>
          </tr>
          <tr>
            <td colspan="6">验收单位(人员)签字</td>
          </tr>
          <tr :rowspan="4">
            <td colspan="6">
              <table border="1" rules="all" class="table">
                <tr>
                  <td colspan="2" :rowspan="3" style="width:15%"></td>
                  <td colspan="2" style="width:15%">验收部门</td>
                  <td style="width:15%">验收人员</td>
                  <td style="width:15%">负责人</td>
                </tr>
                <tr>
                  <td colspan="2">验收部门</td>
                  <td>验收人员</td>
                  <td>负责人</td>
                </tr>
                <tr>
                  <td colspan="2">验收部门</td>
                  <td>验收人员</td>
                  <td>负责人</td>
                </tr>
                <tr>
                  <td colspan="2">**煤机装备有限公司</td>
                  <td colspan="4"></td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </form>
    </el-dialog>
    <!-- 查看 -->
    <el-dialog
        title="查看"
        :visible.sync="islook"
        :close-on-click-modal="false"
        :modal-append-to-body="true"
        :append-to-body="true"
        width="65%"
        class="caigouList-look"
      >
      <div>
        <div class="unloadBox">
          <div class="file" v-for="(item,index) in form.annexList">
            <span class="index">{{index+1}}、</span>
            <span class="blue">{{item.fileName}}</span>
            <i class="blue el-icon-bottom" @click="fileDown(index,item.fileName,item.filePath)" ></i>
            <!-- <i class="blue el-icon-delete" @click="fileDelNoAuto(index,item.filePath)"></i> -->
          </div>

        </div>
        <el-table :data="form.deviceVoList" border>
          <el-table-column align="center" type="index" label="序号" width="55" />
          <el-table-column align="center" label="设备编号" property="deviceCode" width="150"/>
          <el-table-column align="center" label="设备型号" property="deviceSpecs" />
          <el-table-column align="center" label="设备类别" property="typeName" />
          <el-table-column align="center" label="入库时间" property="storageDate" width="170" />
          <!-- <el-table-column align="center" label="入库数量">
            <template>1</template>
          </el-table-column> -->
          <el-table-column align="center" label="设备单位" property="deviceUnitName" />
          <el-table-column align="center" label="需要程度" property="degreeNeed" />
          <el-table-column align="center" label="用途" property="purpose" />
          <el-table-column align="center" label="备注" property="remark" />
          <el-table-column align="center" label="操作">
            <template slot-scope="scoped">
              <el-button type="danger" size="mini" icon="el-icon-refresh-left" @click="delInfo(scoped)">撤回</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";
import ruku from "./ruku"
export default {
  props: ["pid"],
  data() {
    return {
      dialogTableVisible: true,
      list: [],
      optionsgongys: [],
      selectForm: {
        pageNum: 1,
        pageSize: 10,
      },
      date: "",
      loading: false,
      dialogTableVisible: true,
      selectData: "",
      popForm: {},
      isDialog: false,

      isRuku:false,
      info:null,
      islook:false,
      form:{
        annexList:[],
        deviceVoList:[]
      },
      desForm:null
    };
  },
  components:{
    ruku
  },
  created() {
    this.getGys();
    this.getList();
  },
  methods: {
    close() {
      this.$emit("subSetChane");
    },
    //获取生产厂家数据
    getGys() {
      request({
        url: "/device/DeviceSupplier/list",
        method: "get",
      }).then((response) => {
        this.optionsgongys = response.rows;
      });
    },
    /** 查询列表 */
    async getList() {
      this.loading = true;
      request({
        url: `/device/storageRecord/${this.pid}`,
        method: "get",
        params: this.selectForm,
      }).then((res) => {
        this.list = res;
      });
      this.loading = false;
    },
    dateSelect() {
      this.selectForm.applyBeginTime = this.date[0];
      this.selectForm.applyEndTime = this.date[1];
    },
    currentChange(val) {
      this.selectData = val;
    },
    sumbit() {
      this.$emit("qzysdBack", this.selectData); //将submitModel的值传给父组件
    },
    pop(row) {
      this.popForm = row;
      this.popForm.detailList = [];
      this.isDialog = true;
    },
    addBumen() {
      //新加部门
      this.popForm.detailList.push({
        checkingPersonnel: null,
        deptName: null,
        leader: null,
      });
    },
    setDel(index) {
      //删除
      this.popForm.detailList.splice(index, 1);
    },
    print(row) {
      //打印
      console.log("打印", row);
      var newWin = window.open(""); //新打开一个空窗口
      var imageToPrint = document.getElementById("form1"); //获取打印内容
      newWin.document.write(imageToPrint.outerHTML); //将图片添加进新的窗口
      newWin.document.close(); //在IE浏览器中使用必须添加这一句
      newWin.focus(); //在IE浏览器中使用必须添加这一句
      setTimeout(function () {
        newWin.print(); //打印
        newWin.close(); //关闭窗口
      }, 100);
    },
    subSetChane(){
      this.isRuku=false
      this.info=null
    },
    rukuChange(row,flag){
      row.flag=flag
      this.info=row
      this.isRuku=true
    },
    setCxHis(data){
      request({
          url: `/device/storageRecord/revocation/storage`,
          method: "put",
          data,
        }).then((res) => {
          if(res.code==200){
            this.$message.success(res.msg)
            this.getList()
          }
        }).catch(()=>{});
    },
    del(row){
      this.$confirm('确定撤销吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.setCxHis({
            procureDeviceId:row.procureDeviceId,
            storageRecordId:row.id
          })
      }).catch(()=>{this.$message.info('取消撤销')})
    },
    setCxDev(data){
      request({
          url: `/device/storageRecord/revocation/storage/device`,
          method: "put",
          data,
        }).then((res) => {
          if(res.code==200){
            this.$message.success(res.msg)
            this.getInfo(this.desForm)
            // this.form.deviceVoList.splice(info.$index,1)
          }
        });
    },
    delInfo(info){
      this.$confirm('确定撤销吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        this.setCxDev({
            deviceId:info.row.deviceId,
            procureDeviceId:this.desForm.procureDeviceId,
            storageRecordId:this.desForm.id
        })
        
      }).catch(() => {
        this.$message.info('取消撤销')
      })
    },
    getInfo(row){
      this.desForm=row
      request({
          url: `/device/storageRecord/income/${row.id}`,
          method: "get"
        }).then((res) => {
          if(res.code==200){
            this.form=res.data
          }
        });
      this.islook=true
    },
    async fileDown(index,fileName,filePath){
      this.downloadFile(encodeURI(filePath))
    },
  },
};
</script>
<style lang="scss">
.caigouList-look {
  
  .el-dialog__body {
    height: 75vh;
    overflow: scroll;
  }
  .unloadBox {
      border: 1px solid #cccccc;
      margin-bottom: 20px;
      min-height: 50px;
      // overflow: hidden;
      // width: 1000px;
      .blue{
        color: #2196F3;
      }
      .file {
        width: 100%;
        border-top: 1px #cccccc dotted;
        line-height: 50px;

        .index {
          padding: 0 10px;
          color: #666
        }

        i {
          float: right;
          line-height: 50px;
          padding-right: 10px;
          font-size: 20px;
          cursor: pointer;
        }

        .type {
          color: #666;
          float: right;
          padding-right: 30px;
        }

      }
    }
}
.caigouListDia{
  
 .el-dialog__body {
  height: 85vh;
  overflow: scroll;
}
h4 {
  color: #05a380;
}
.table {
  border: 1px solid #cccccc;
  color: #606266;
  font-size: inherit;

  tr {
    .el-input--medium .el-input__inner,
    .el-textarea .el-textarea__inner {
      border: none;
    }

    td:nth-child(2n-1) {
      width: 180px;
      text-align: center;
    }

    td:nth-child(2n) {
      width: 320px;
    }

    .title {
      padding-left: 20px;
      text-align: left;
    }

    td {
      line-height: 35px;

      .el-select,
      .datatime {
        width: 100%;
      }
    }
  }
}
}

</style>
